<template>
	<div class="list-box">
		<div class="pannel-title pannel-between">
			<div>用户列表</div>
			<a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addUser()">
				<PlusCircleFilled />
				新增用户
			</a-button>
		</div>
		<div class="line"></div>
		<div class="data-table">
			<a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
				<template #level="{ text }">
					<span>{{ text === "Vip" ? "高级会员" : "普通会员" }}</span>
				</template>
				<template #active="{ text }">
					<a-tag v-if="text === 'Active'" color="#2db7f5">
						<template #icon><close-circle-outlined /></template>
						正常
					</a-tag>
					<a-tag v-else-if="text === 'InActive'" color="#cccccc">未激活</a-tag>
					<a-tag v-else-if="text === 'Freeze'" color="error">冻结</a-tag>
				</template>
				<template #action="{ record }">
					<a title="编辑" style="margin-right: 5px" @click="editUser(record)"><img src="@/assets/images/cz-edit.png" /></a>
					<a @click="deleteUser(record)" style="margin-right: 5px" title="删除"><img src="@/assets/images/cz-delete.png" /></a>
					<a-tag @click="Active(record)" style="padding:1px 7px;border-radius:3px;cursor:pointer;" v-if="record.active === 'InActive' || record.active === 'Freeze'" color="#87d068">启用</a-tag>
					<a-tag @click="Freeze(record)" style="padding:1px 7px;border-radius:3px;cursor:pointer;" v-else color="#f50">冻结</a-tag>
				</template>
			</a-table>
			<a-modal v-model:visible="visible" :maskClosable="false" :afterClose="cancel">
				<h3 class="modal-title">{{modalTitle}}</h3>
				<div class="modal-form">
					<a-form ref="form1" :model="formState" :rules="rules" :labelCol="{ span: 6, offset: 0 }">
						<a-form-item label="登录邮箱" name="loginId">
							<a-input v-model:value="formState.loginId" placeholder="请输入登录邮箱" :disabled="activeItem.login_id" />
						</a-form-item>
						<a-form-item :label="activeItem.login_id?'修改登录密码':'登录密码'" name="loginPw" :rules="rules.loginPw">
							<a-input v-model:value="formState.loginPw" placeholder="请输入登录密码">
								<template #suffix>
									<a-tooltip title="密码由6位以上数字、字母或者‘-’、‘_’、‘\’组成">
										<info-circle-outlined style="color: rgba(255, 0, 0, 0.7)" />
									</a-tooltip>
								</template>
							</a-input>
						</a-form-item>
						<a-form-item label="昵称" name="name">
							<a-input v-model:value="formState.name" placeholder="请输入昵称" />
						</a-form-item>
						<a-form-item label="账号类型" name="level">
							<a-select v-model:value="formState.level" style="width: 240px" placeholder="请选择账号类型">
								<a-select-option value="Normal">普通会员</a-select-option>
								<a-select-option value="Vip">高级会员</a-select-option>
							</a-select>
						</a-form-item>
					</a-form>
				</div>
				<template #footer>
					<div class="modal-btn">
						<a-button type="default" shape="round" @click="cancel()">取消</a-button>
						<a-button type="primary" shape="round" @click="confirm()">确定</a-button>
					</div>
				</template>
			</a-modal>
		</div>
	</div>
</template>
<script>
import { PlusCircleFilled } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Button, Tag, Form, Input, Select } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
export default {
	components: {
		PlusCircleFilled,
		ATable: Table,
		AButton: Button,
		ATag: Tag,
		AModal:Modal,
		AForm:Form,
		AFormItem:Form.Item,
		AInput:Input,
		ASelect:Select,
		ASelectOption:Select.Option,
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "用户管理",
			isBack: false,
		});
		const formState = ref({
			loginId: "",
			loginPw: "",
			name: "",
			level: "",
		});
		const dataSource = ref([]);
		const columns = reactive([
			{
				title: "登录账号",
				dataIndex: "login_id",
				key: "login_id",
			},
			{
				title: "昵称",
				dataIndex: "name",
				key: "name",
			},
			{
				title: "用户类型",
				dataIndex: "level",
				key: "level",
				slots: { customRender: "level" },
			},
			{
				title: "创建时间",
				dataIndex: "create_time",
				key: "create_time",
			},
			{
				title: "用户状态",
				dataIndex: "active",
				key: "active",
				slots: { customRender: "active" },
			},
			{
				title: "操作",
				key: "action",
				slots: { customRender: "action" },
			},
		]);
		const pagination = reactive({
			current: 1,
			pageSize: 10,
			total: 0,
		});
		return {
			dataSource,
			columns,
			pagination,
			formState,
			isLoading: ref(false),
			visible: ref(false),
			rules: ref({
				loginId: [
					{
						required: true,
						message: "不能为空",
						trigger: "blur",
					},{
						type:"email",
						message:"邮箱格式错误",
						trigger: "blur",
					}
				],
				loginPw: [
					{
						required: true,
						message: "不能为空",
						trigger: "blur",
					},
					{
						trigger: "blur",
						message: "密码格式错误",
						pattern: /^[0-9A-Za-z_\\-]{6,32}$/,
					},
				],
				name: {
					required: true,
					message: "不能为空",
					trigger: "blur",
				},
				level: {
					required: true,
					message: "不能为空",
					trigger: "change",
				},
			}),
			modalTitle:ref(''),
			activeItem:ref({})
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			this.isLoading = true;
			httpRequest
				.post("获取用户列表", { page: this.pagination.current, pageSize: this.pagination.pageSize })
				.then((res) => {
					this.dataSource = res.data.data;
					this.pagination.total = res.data.total;
				})
				.finally(() => {
					this.isLoading = false;
				});
		},
		handleTableChange(page) {
			this.pagination.current = page.current;
			this.getList();
		},
		deleteUser(item) {
			Modal.confirm({
				title: "系统提示",
				content: "确认删除此用户？",
				okText: "确认",
				cancelText: "取消",
				onOk: () => {
					return new Promise((res) => {
						httpRequest
							.post("删除用户", { loginId: item.login_id })
							.then(() => {
								message.success("删除用户成功");
								this.getList();
							})
							.catch(() => {
								message.warning({ content: "删除用户失败", key: "error" });
							})
							.finally(() => {
								this.isLoading = false;
								res();
							});
					});
				},
			});
		},
		addUser() {
			this.formState = {
				loginId: "",
				loginPw: "",
				name: "",
				level: "",
			};
			this.activeItem = {};
			this.rules.loginPw= [
					{
						required: true,
						message: "不能为空",
						trigger: "blur",
					},
					{
						trigger: "blur",
						message: "密码格式错误",
						pattern: /^[0-9A-Za-z_\\-]{6,32}$/,
					},
				];
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.modalTitle = "新增用户";
			this.visible = true;
		},
		editUser(item){
			this.formState = {
				loginId: item.login_id,
				loginPw: "",
				name: item.name,
				level: item.level,
				
			};
			this.activeItem = {...item};
			this.rules.loginPw= [
					{
						trigger: "blur",
						message: "密码格式错误",
						pattern: /^[0-9A-Za-z_\\-]{6,32}$/,
					},
				];
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.modalTitle = "编辑用户";
			this.visible = true;
		},
		cancel(){
			this.visible = false;
		},
		confirm(){
			const url = this.activeItem.login_id ? '编辑用户':'创建用户';
			this.$refs.form1.validate().then(res=>{
				if(this.activeItem.login_id){
					res.otpStatus='N';
					res.active = this.activeItem.active;
				}
				httpRequest
				.post(url, res)
				.then(() => {
					message.success(this.activeItem.login_id ? "用户编辑成功":"用户创建成功");
					this.getList();
				})
				.finally(() => {
					this.visible = false;
				});
			})
		},
		Active(item){
			Modal.confirm({
				title: "系统提示",
				content: "是否启用此用户？",
				okText: "确认",
				cancelText: "取消",
				onOk: () => {
					return new Promise((res) => {
						const {login_id:loginId,name,level} = item;
						httpRequest
							.post("编辑用户", { name,loginId,level,loginPw:'',active:'Active',otpStatus: "N" })
							.then(() => {
								message.success("用户启用成功");
								this.getList();
							})
							.catch(() => {
								message.warning({ content: "用户启用失败", key: "error" });
							})
							.finally(() => {
								res();
							});
					});
				},
			});
		},
		Freeze(item){
			Modal.confirm({
				title: "系统提示",
				content: "是否冻结此用户？",
				okText: "确认",
				cancelText: "取消",
				onOk: () => {
					return new Promise((res) => {
						const {login_id:loginId,name,level} = item;
						httpRequest
							.post("编辑用户", { name,loginId,level,loginPw:'',active:'Freeze',otpStatus: "N" })
							.then(() => {
								message.success("用户冻结成功");
								this.getList();
							})
							.catch(() => {
								message.warning({ content: "用户冻结失败", key: "error" });
							})
							.finally(() => {
								res();
							});
					});
				},
			});
		}
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
</style>
